<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>模板语法</title>
    </head>
    <div>

        <!--在 #first 元素内部书写根组件的模板(template)-->
        <div id="first">
            <p>{{text}}</p>
            <p v-text="text"></p>
            <p v-html="rawHtml"></p>
            <p>{{ score >= 60 ? '及格' : '有待提高' }}</p>
            <p>{{score}}</p>
        </div>

        <script src="vue@3.2.45.js" type="text/javascript"></script>

        <script>
            const options = {
                data() {
                    return {
                        text: '<b>阿芳是个好孩子</b>',
                        rawHtml: '<b>婷婷是个好姑娘</b>',
                        score: ( Math.random() * 100 ) | 0
                    }
                }
            }

            // 解构赋值
            const { createApp } = Vue;

            // 创建应用
            const app = createApp( options );
            // 挂载应用
            app.mount( '#first' );
        </script>
    </div>
</html>